<script setup> 
import buttonVue from '../button/button.vue';
import {RouterLink} from 'vue-router'
import {ref,onMounted} from 'vue'
import { useRouter,useRoute } from 'vue-router'
import qs from 'qs'
import axios from 'axios'
import {ElMessageBox } from 'element-plus'
const router = useRouter();

const  recharge = ref('支付密码')
const  payPassword1=ref('')
function toThrid(tit){
    let token = localStorage.getItem('token')
    let longToken = localStorage.getItem('longToken')
    sessionStorage.setItem("goto",tit)
    axios.post("http://192.168.110.221:8080/user/checkPayPasswordController",
    qs.stringify({
        userNumber:"U10000000001",
        payPassword:payPassword1.value,
        userId:"1",
        token:token,
        longToken:longToken
    })).then((resp)=>{
        if(resp.data.code == 200 ){
            console.log(resp.data.msg);           
            router.push('/pay-password-setting')
        }else if(resp.data.code == 7001){
            console.log(resp.data.msg);
            open("输入密码错误")
        }else if(resp.data.code == 400){
            console.log(resp.data.msg);
            open("输入格式错误")
        }else{  
            open(resp.data.msg)   
        }
    }).catch((e)=>{
        //跳转到404错误页面
        open("服务器错误")  
    })
}

function open(errormsg){
    ElMessageBox.alert(errormsg, '验证失败!', {
    confirmButtonText: '确认',
    })
}
</script>

<template>
        <div class="box">
        <h1 class="title">输入现在支付密码</h1>
        <input type="password" placeholder="输入支付密码" v-model="payPassword1" maxlength="6">
            <button-vue btn-color="#0278FE" btn-name="确认支付密码" @click="toThrid(recharge)"></button-vue>
        </div>
</template>

<style scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.box{
    margin: 0px auto 0;
    text-align: center;
    width: 100%;
    background-color: #fff;
    padding: 10px 0;
}
.title{
    font-size: 16px;
    margin: 10px 0;
}
input{
    width: 80%;
    font-size: 16px;
    outline: none;
    padding: 10px 0;
    border: transparent;
    border-bottom: 1px solid lightgray;
    margin: 20px 0;
}
</style>